<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频截图</title>
	</head>
	<body>
		<video id="myVideo" src="http://127.0.0.1:8081/video/play" controls style="width: 400px;height: 300px;"></video>
		<canvas id="myCanvas"></canvas>
	
		<img id="image"/>
		
		<button onclick="screenshot()">截图</button>
		
		
		<script>
			
			// 获取video和canvas元素
			var video = document.getElementById('myVideo');
			var canvas = document.getElementById('myCanvas');
			var ctx = canvas.getContext('2d');
			
			
			// 绘制当前帧的函数
			function drawFrame() {
			    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
			}
			
		
			//截图
			function screenshot(){
				
			}
		
			// 当视频播放时，获取当前帧的图片
			video.addEventListener('pause', function() {
			    drawFrame();
			}, false);
			
			
			// 获取当前帧的函数
			
		
			
			
		</script>
		
	</body>
</html>